<template>
	<!-- <view>
		更改地址页面
	</view> -->
	<view class="box">
		<view class="inputs">
			<view class="item">
				<view class="item-l">收件人</view>
				<view class="item-r">
					<input type="text" v-model="name" placeholder="请输入收件人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="item-l">电话号码</view>
				<view class="item-r">
					<input type="text" v-model="phone" placeholder="请输入收件人电话号码"/>
				</view>
			</view>
			<view class="item">
				<view class="item-l">所在地区</view>
				<view class="item-r" @tap="openAddres">
					<input type="text" :value="label" placeholder="请点击选择地址"/>
				</view>
			</view>
			<view class="item">
				<view class="item-l">详细地址</view>
				<view class="item-r">
					<input type="text" v-model="address" placeholder="输入详细地址" />
				</view>
			</view>
			<view class="item">
				<view class="item-l">设置默认地址</view>
				<view class="item-r">
					<switch @change="switchChange" />
				</view>
			</view>
		</view>	
		<view class="add" @click="addre" >删除收货地址</view>
		<view class="save" @click="addAddress">保存收货地址</view>
		<!-- <view>{{name}}</view> -->
		<!-- 收货地址 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {addAddressInfo,delAddressInfo,makeAddressDefaul,updateAddressInfo} from "../../../../api/mine/address/index.js"
	
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				//收件人
				name:"",
				//电话号码
				phone:"",
				//选择收货地址 所在地区
				label:"",
				//详细地址
				address:"",
				//是否是默认地址
				switch:'',
				//地区编码
				cityCode:"",
				//省
				province:"",
				//市
				city:"",
				//区
				region:"",
				//获取的id
				id:"",
			};
		},
		 components: {
		        simpleAddress
		    },
		methods:{
			//点击删除收货地址
			addre(){
				delAddressInfo(this.id).then(res=>{
					console.log(res)
				})
			},
			//点击添加地址
			addAddress(){
				var obj={
					city:this.city,
					cityCode: this.cityCode,
					defaultStatus: this.switch,
					detailAddress:this.address,
					name: this.name,
					phoneNumber: this.phone,
					postCode: "",
					province:this.province,
					region: this.region,
					tag: "",
				}
				// console.log(obj);
				addAddressInfo(obj).then(res=>{
					console.log(res)
				})
			},
			//点击选择地址
			openAddres(){
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			//成功后的回调
			onConfirm(e){
				console.log(e)
				this.label=e.label;
				this.cityCode=e.cityCode;
				this.province=e.labelArr[0];
				this.city=e.labelArr[1];
				this.region=e.labelArr[2];
			},
			//改变默认值
			switchChange(e){
				console.log(e);
				
				if(e.detail.value){
					this.switch=1;
				}else{
					this.switch=0;
				}
				
			}
			
		},
		onLoad(e){
			console.log(e)
			this.id=e.id;
			
			// if(e.id){
				
				
			// }else{
			
			// }
			
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	height: 100vh;
	background-color:#F1ECE7;
	.inputs{
		.item{
			width: 94%;
			margin: 0 3%;
			border-bottom: 1Px solid #ccc;
			display: flex;
			.item-l{
				width: 30%;
				height: 60px;
				font-weight: 200;
				font-size: 15px;
				display: flex;
				align-items: center;
			}
			.item-r{
				width: 70%;
				padding: 10px 0;
				align-items: center;
				display: flex;
				font-size: 15px;
				switch{
					margin-left:170px;
				}
			}
		}
	}
	.add{
		width: 95%;
		height:50px;
		margin: 30px auto;
		background-color:#e64340;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	.save{
		position: fixed;
		bottom:10px;
		left:35px;
		width: 300px;
		height: 50px;
		border-radius: 60px;
		background: rgb(53, 78, 68);
		color: rgb(255, 255, 255);
		text-align: center;
		line-height:50px;
	}
}
</style>
